<template>
    <div class="home-container">
        <div class="home-content">
            <div class="tip"> 
                <Input search enter-button style ="width: 350px" placeholder="请输入姓名、电话"
                 @click="searchBykeywords(keywords)" 
                 v-model="keywords"
                 />
                <Button type="primary" @click="showAddInfo">新增</Button>
                <add v-show=false></add>
            </div>
           <Table border :columns="header" :data="userList">
            <template slot-scope="{ row }" slot="name">
                <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
                <Button type="error" size="small" @click="remove(index)">Delete</Button>
            </template>
        </Table>
        </div>
    </div>
</template>

<script>
import https from "../https.js"
import add from "../views/AddUser.vue"
export default {
    name: 'home',
    data (){
        return {
            header : [
                {
                    title : "姓名",
                    slot : 'name'
                },
                {
                    title : "电话",
                    key : "phone"
                },
                {
                    title : "邮箱",
                    key : "email"
                },
                {
                    title : "角色",
                    key : "departmentname"
                },
                {
                    title: 'Action',
                    slot: 'action',
                    width: 150,
                    align: 'center'
                }
            ],
            userList : [],
            keywords : '' ,
            name : '',
            password : '',
            role : '',
            email : '',
            phone : '',
            fromShow : false
        }
    },
    components :{
        add
    },
    methods :{
        getDataList (){
            let params = {
                page : 1,
                size : 10
            };
            https.fetchGet("/api/pmuser/findUser" ,params).then( result =>{
                if( result.code == 200){
                    this.userList = result.data.records;
                }else{
                    console.log(result.msg)
                }
            }).catch( err => {
                console.log(err)
            })
        },
        show(index){
            console.log(index)
        },
        remove(index){
            console.log(index)
        },
        searchBykeywords (keywords){
            this.$axios({
                url : "/api/pmuser",
                param : {
                    keywords : keywords
                }
            }).then ( result => [
                console.log(result)
            ])
        },
        // showAddInfo (){
        // //     console.log("跳转新增页面")
        // //     this.$router.push({ path: 'adduser' });
        // //    // this.$router.push("adduser")
        // }
        showAddInfo (){
            this.fromShow = true;
            this.$Modal.confirm({
                scrollable:true,
                okText:'保存',
                render : (h) => {
                    return h ( add  , {
                        props : { name : String},
                        on : {
                            name :(name) =>{
                                this.name = name
                            },
                            password : (password) => {
                                this.password = password
                            },
                            email : (email) =>{
                                this.email = email
                            },
                            phone : (phone) =>{
                                this.phone = phone
                            },
                            role : (role) => {
                                this.role = role
                            }
                        }
                    })
                },
                onok : () =>{
                    console.log( this.name + this.password +this.email + this.role + this.phone)
                }
            })
        }
    },
    created (){
        this.getDataList();
    }
}
</script>

<style scoped lang ="scss">
.home-container {
    padding: 10px;
    padding-top: 5px;
}
.home-content {
    padding: 10px;
    border-radius: 5px;
    background: #fff;
}
.el-table .warning-row {
    background: oldlace;
  }

.el-table .success-row {
background: #f0f9eb;
}
.tip {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.vertical-center-modal{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
</style>